<template>
    <view class="forget-password-container">
        <navigation-header title="忘记密码" show-back="true"></navigation-header>
        <view class="forget-password-body-container">
            <mobile-input v-model:mobile="mobile"></mobile-input>
            <divider></divider>
            <sms-code-input v-model:smsCode="smsCode"></sms-code-input>
            <divider></divider>
            <password-input v-model:password="password"></password-input>
            <divider></divider>
            <password-input v-model:password="confirmPassword" placeholder="确认新密码"></password-input>
            <divider></divider>
            <view class="operation-container">
                <button class="back" @click="back">返回</button>
                <button @click="submit">提交</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import NavigationHeader from '@/components/NavigationHeader.vue';
import MobileInput from '@/components/MobileInput.vue';
import SmsCodeInput from '@/components/SmsCodeInput.vue';
import ImageCodeInput from '@/components/ImageCodeInput.vue';
import PasswordInput from '@/components/PasswordInput.vue';
import Divider from '@/components/Divider.vue';
const mobile = ref('');
const smsCode = ref('');
const password = ref('');
const confirmPassword = ref('');
function back() {
    uni.navigateBack();
}
function submit() {
    uni.navigateTo({
        url: '/pages/login/index'
    });
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.forget-password-container {
    @extend .column-container-layout;
    .forget-password-body-container {
        @extend .column-container-layout;
        padding: $scale * 20rpx;
        .operation-container {
            @extend .row-layout;
            justify-content: space-between;
            margin: $scale * 50rpx 0;
            button {
                width: 49%;
                margin: 0;
            }
            .back {
                background-color: #e1f3ff;
                color: #437eff;
            }
        }
    }
}
</style>
